<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户申请投放</title>
    <script src="../src/static/jquery.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="userApplyFor.css">
    <link rel="stylesheet" href="../putIn/css/style.css">
    <link rel="stylesheet" href="cityPicker/css/city-picker.css">
    <link rel="stylesheet" href="cityPicker/css/main.css">
    <script src="cityPicker/js/city-picker.data.js"></script>
    <script src="cityPicker/js/city-picker.js"></script>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md6">
            <h2>1.法人持身份证拍照</h2>
            <span class="huise">参考照片：</span>
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="nav scsfz">
                    </div>
                    <span class="huise">请你的脸部和身份证清晰可见</span>
                </div>
                <div class="layui-col-md6">
                    <div class="nav" id="demo1">
                        <i id="icon_1" class="layui-icon layui-icon-picture"></i>
                    </div>
                    <input type="hidden" value="" name="taxPic" id="taxPic">
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <h2>2.营业执照</h2>
            <span class="huise">参考照片：</span>
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="nav yyzz_zp">
                    </div>
                    <span class="huise">请保证相关信息清晰可见</span>
                </div>
                <div class="layui-col-md6">
                    <div class="nav" id="demo2">
                        <i id="icon_2" class="layui-icon layui-icon-picture"></i>
                    </div>
                    <input type="hidden" value="" name="businessPic" id="businessPic">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <h2>3.公司内外景</h2>
        <div class="layui-col-md4">
            <div class="nav" id="demo3">

                <div id="icon_3">公司外景一</div>
                <input type="hidden" value="" name="gatePic1" id="gatePic1">
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="nav" id="demo4">

                <div id="icon_4">公司内景一</div>
                <input type="hidden" value="" name="gatePic2" id="gatePic2">
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="nav" id="demo5">

                <div id="icon_5">公司内景二</div>
                <input type="hidden" value="" name="gatePic3" id="gatePic3">
            </div>
        </div>

    </div>
    <div class="layui-row">
        <div class="layui-col-md3 layui-col-md-offset2">
            <div class="nav" id="demo6">

                <div id="icon_6">公司内景三</div>
                <input type="hidden" value="" name="gatePic4" id="gatePic4">
            </div>
        </div>
        <div class="layui-col-md3 layui-col-md-offset1">
            <div class="nav" id="demo7">

                <div id="icon_7">公司内景四</div>
                <input type="hidden" value="" name="gatePic5" id="gatePic5">
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">公司名称</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入"
                           autocomplete="off" class="layui-input" id="gsMc">
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入"
                           autocomplete="off" class="layui-input" id="phoneNum">
                </div>
            </div>
        </div>
        <div class="layui-col-md3 layui-col-md-offset1">
            <form>
                <div>选择地区：</div>
                <div style="position: relative;">
                    <input id="chongtu" readonly type="text" data-toggle="city-picker" placeholder="点击从下拉面板中选择省/市/区县/镇">
                </div>
            </form>
        </div>

    </div>
    <div class="layui-row">
        <div class="layui-col-md6">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">存放点位</label>
                <div class="layui-input-block">
                    <textarea id="Loca" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="nav_bb">
        <div style="text-align: center">
            <button class="layui-btn layui-btn-fluid layui-btn-radius layui-btn-normal" id="tiJiao"
                    onclick="login_check()" type="button" style="width: 80%;">确认提交
            </button>
        </div>
        <div style="margin-top: 3%;text-align: center">
            <p style="font-size: 12px;display: inline-block;color: rgb(200,200,200)">点击确认即表示同意</p>
            <a href="../putIn/agreement.html">《用户投放协议》</a>
        </div>
    </div>
</div>
<script>
    layui.use(['upload', 'jquery'], function () {
        var upload = layui.upload;
        var $ = layui.jquery;
//执行实例
        var uploadInst = upload.render({
            elem: '#demo1' //绑定元素
            , url: '/api/UploadImg' //上传接口
            , method: 'post' //上传接口类型
            , data: {
                companyName: function () {
                    var gsMc = "";
                    return gsMc;
                }
            }
            , headers: {
//                Authorization: BEAR.getLocalStr('access_token')
            }  //接口的请求头
            , accept: 'images'  //校验文件类型
            , exts: 'jpg|png|gif|bmp|jpeg'   //允许上传的文件后缀名
            , auto: true  //是否选择完文件之后自动上传
            , field: 'fileList'  //文件域的字段名
            , size: 5000 //最大可允许上传大小
            , multiple: false //是否允许多文件上传
            , drag: true  //是否接受文件拖拽上传
            , before: function (obj) {
                layer.load(); //上传loading
            }
            , done: function (res) {
                //上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#icon_1').hide();
                $('#demo1').css({
                    'background-image': 'url("' + res.src + '")',
                    'background-position': 'center',
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover'
                });
                $('#taxPic').val(res.src);
            }
            , error: function () {
//请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });

        var uploadInst2 = upload.render({
            elem: '#demo2' //绑定元素
            , url: '/api/UploadImg' //上传接口
            , method: 'post' //上传接口类型
            , data: {
                companyName: function () {
                    var gsMc = "";
                    return gsMc;
                }
            }
            , headers: {
//                Authorization: BEAR.getLocalStr('access_token')
            }  //接口的请求头
            , accept: 'images'  //校验文件类型
            , exts: 'jpg|png|gif|bmp|jpeg'   //允许上传的文件后缀名
            , auto: true  //是否选择完文件之后自动上传
            , field: 'fileList'  //文件域的字段名
            , size: 5000  //最大可允许上传大小
            , multiple: false //是否允许多文件上传
            , drag: true  //是否接受文件拖拽上传
            , before: function (obj) {
                layer.load(); //上传loading
            }
            //, auto: true 时，选择文件后直接上传，成功后会调用此方法，返回的文件路径放到对应的元素上就可以了
            , done: function (res) {
                //上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#icon_2').hide();
                $('#demo2').css({
                    'background-image': 'url("' + res.src + '")',
                    'background-position': 'center',
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover'
                });
                $('#businessPic').val(res.src);
            }
            , error: function () {
                //请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });

        var uploadInst3 = upload.render({
            elem: '#demo3' //绑定元素
            , url: '/api/UploadImg' //上传接口
            , method: 'post' //上传接口类型
            , data: {
                companyName: function () {
                    var gsMc = "";
                    return gsMc;
                }
            }
            , headers: {
//                Authorization: BEAR.getLocalStr('access_token')
            }  //接口的请求头
            , accept: 'images'  //校验文件类型
            , exts: 'jpg|png|gif|bmp|jpeg'   //允许上传的文件后缀名
            , auto: true  //是否选择完文件之后自动上传
            , field: 'fileList'  //文件域的字段名
            , size: 5000  //最大可允许上传大小
            , multiple: false //是否允许多文件上传
            , drag: true  //是否接受文件拖拽上传
            , before: function (obj) {
                layer.load(); //上传loading
            }
            , done: function (res) {
//上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#icon_3').hide();
                $('#demo3').css({
                    'background-image': 'url("' + res.src + '")',
                    'background-position': 'center',
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover'
                });
                $('#gatePic1').val(res.src);
            }
            , error: function () {
//请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });


        var uploadInst4 = upload.render({
            elem: '#demo4' //绑定元素
            , url: '/api/UploadImg' //上传接口
            , method: 'post' //上传接口类型
            , data: {
                companyName: function () {
                    var gsMc = "";
                    return gsMc;
                }
            }
            , headers: {

            }  //接口的请求头
            , accept: 'images'  //校验文件类型
            , exts: 'jpg|png|gif|bmp|jpeg'   //允许上传的文件后缀名
            , auto: true  //是否选择完文件之后自动上传
            , field: 'fileList'  //文件域的字段名
            , size: 5000  //最大可允许上传大小
            , multiple: false //是否允许多文件上传
            , drag: true  //是否接受文件拖拽上传
            , before: function (obj) {
                layer.load(); //上传loading
            }
            , done: function (res) {
//上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#icon_4').hide();
                $('#demo4').css({
                    'background-image': 'url("' + res.src + '")',
                    'background-position': 'center',
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover'
                });
                $('#gatePic2').val(res.src);
            }
            , error: function () {
//请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });


        var uploadInst5 = upload.render({
            elem: '#demo5' //绑定元素
            , url: '/api/UploadImg' //上传接口
            , method: 'post' //上传接口类型
            , data: {
                companyName: function () {
                    var gsMc = "";
                    return gsMc;
                }
            }
            , headers: {
//                Authorization: BEAR.getLocalStr('access_token')
            }  //接口的请求头
            , accept: 'images'  //校验文件类型
            , exts: 'jpg|png|gif|bmp|jpeg'   //允许上传的文件后缀名
            , auto: true  //是否选择完文件之后自动上传
            , field: 'fileList'  //文件域的字段名
            , size: 5000  //最大可允许上传大小
            , multiple: false //是否允许多文件上传
            , drag: true  //是否接受文件拖拽上传
            , before: function (obj) {
                layer.load(); //上传loading
            }
            , done: function (res) {
//上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#icon_5').hide();
                $('#demo5').css({
                    'background-image': 'url("' + res.src + '")',
                    'background-position': 'center',
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover'
                });
                $('#gatePic3').val(res.src);
            }
            , error: function () {
//请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });


        var uploadInst6 = upload.render({
            elem: '#demo6' //绑定元素
            , url: '/api/UploadImg' //上传接口
            , method: 'post' //上传接口类型
            , data: {
                companyName: function () {
                    var gsMc = "";
                    return gsMc;
                }
            }
            , headers: {
//                Authorization: BEAR.getLocalStr('access_token')
            }  //接口的请求头
            , accept: 'images'  //校验文件类型
            , exts: 'jpg|png|gif|bmp|jpeg'   //允许上传的文件后缀名
            , auto: true  //是否选择完文件之后自动上传
            , field: 'fileList'  //文件域的字段名
            , size: 5000  //最大可允许上传大小
            , multiple: false //是否允许多文件上传
            , drag: true  //是否接受文件拖拽上传

            , before: function (obj) {
                layer.load(); //上传loading
            }
            , done: function (res) {
//上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#icon_6').hide();
                $('#demo6').css({
                    'background-image': 'url("' + res.src + '")',
                    'background-position': 'center',
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover'
                });
                $('#gatePic4').val(res.src);
            }
            , error: function () {
//请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });

        var uploadInst7 = upload.render({
            elem: '#demo7' //绑定元素
            , url: '/api/UploadImg' //上传接口
            , method: 'post' //上传接口类型
            , data: {
                companyName: function () {
                    var gsMc = "";
                    return gsMc;
                }
            }
            , headers: {
//                Authorization: BEAR.getLocalStr('access_token')
            }  //接口的请求头
            , accept: 'images'  //校验文件类型
            , exts: 'jpg|png|gif|bmp|jpeg'   //允许上传的文件后缀名
            , auto: true  //是否选择完文件之后自动上传
            , field: 'fileList'  //文件域的字段名
            , size: 5000  //最大可允许上传大小
            , multiple: false //是否允许多文件上传
            , drag: true  //是否接受文件拖拽上传

            , before: function (obj) {
                layer.load(); //上传loading
            }
            , done: function (res) {
//上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#icon_7').hide();
                $('#demo7').css({
                    'background-image': 'url("' + res.src + '")',
                    'background-position': 'center',
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover'
                });
                $('#gatePic5').val(res.src);
            }
            , error: function () {
//请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });
    });
</script>
<script>
    layui.use('form', function () {
        var form = layui.form;
    });

    function login_check() {
        var quyu = $('#chongtu').val();
        var cfdq = $('#Loca').val();
        $('#Loca').val(quyu + "/" + cfdq);
        var blg = yanzheng(); //验证

        if (blg == true) {
            var companyName = $("#gsMc").val();
            var phone = $("#phoneNum").val();
            var depositAddress = $("#Loca").val();
            var taxPic = $("#taxPic").val();
            var businessPic = $("#businessPic").val();
            var gatePic1 = $("#gatePic1").val();
            var gatePic2 = $("#gatePic2").val();
            var gatePic3 = $("#gatePic3").val();
            var gatePic4 = $("#gatePic4").val();
            var gatePic5 = $("#gatePic5").val();


            $.ajax(
                {
                    url: '/api/getAudingInfortion',
                    data: {
                        companyName: companyName,
                        phone: phone,
                        depositAddress: depositAddress,
                        taxPic: taxPic,
                        businessPic: businessPic,
                        gatePic1: gatePic1,
                        gatePic2: gatePic2,
                        gatePic3: gatePic3,
                        gatePic4: gatePic4,
                        gatePic5: gatePic5
                    },
                    type: 'POST',
                    dataType: 'json',
                    success: function (data) {
                        alert(data.msg);
                        window.location.reload();
                    },
                    error: function (error) {
                        //请求失败  获取的报错信息
                        console.log(error);
                    }
                }
            );
        }
    }

    function yanzheng() {
        var vr = $('input:radio[name="wenben"]:checked').val()
        if ($('#phoneNum').val().length !== 11) {
            alert("手机号码输入错误！");
            return false;
        } else if ($('#chongtu').val() == null || $('#chongtu').val() == "") {
            alert("请选择地区！");
            return false;
        } else if ($('#gsMc').val() == null || $('#gsMc').val() == "") {
            alert("公司名称不能为空");
            return false;
        } else if ($('#Loca').val() == null || $('#Loca').val() == "") {
            alert("存放点位不能为空！");
            return false;
        } else if ($('#taxPic').val() == null || $('#taxPic').val() == "") {
            alert("法人持身份证拍照不能为空！");
            return false;
        } else if ($('#businessPic').val() == null || $('#businessPic').val() == "") {
            alert("营业执照不能为空！");
            return false;
        } else if ($('#gatePic1').val() == null || $('#gatePic1').val() == "") {
            alert("公司外景一不能为空！");
            return false;
        } else if ($('#gatePic2').val() == null || $('#gatePic2').val() == "") {
            alert("公司内景一不能为空！");
            return false;
        }
        else if ($('#gatePic3').val() == null || $('#gatePic3').val() == "") {
            alert("公司内景二不能为空！");
            return false;
        } else if ($('#gatePic4').val() == null || $('#gatePic4').val() == "") {
            alert("公司内景三不能为空！");
            return false;
        } else if ($('#gatePic5').val() == null || $('#gatePic5').val() == "") {
            alert("公司内景三不能为空！");
            return false;
        }
        return true;
    }
</script>
</body>
</html>